import React, { Component } from 'react';
import info from './subCard.module.scss'
import right from '../../static/right.png'
import { getSubCardDetail, getCode, unbindCard } from '../../utils/interface'
import p2 from '../../static/p2.png'
import { getUrlParam } from '../../utils/tools'
import { divide } from '../../utils/maths'
class SubCardInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            details: {},
            state: false,
            inpValu: "",
            msg: [1, 1, 1, 1, 1, 1],
            orderList: []
        }
    }
    render() {
        let a = this.state.details.payLimit
        console.log(this.state.details.payLimit)
        return (
            <div className={info.subCardInfo}>
                <header>
                    <div className={info.top}>
                        <div className={info.left}>
                            <div>
                                <img src={p2}></img>
                                <p>{this.state.details.phone}</p>
                            </div>
                            <span>{this.state.details.staffCardType}</span>
                        </div>
                        <div className={info.right}>
                            <p>
                                <i>￥</i>
                                {this.state.details.payLimit?divide(this.state.details.payLimit , 100):'0.00'}
                            </p>
                            <div>
                                <p>每月消费上限</p>
                                <p onClick={this.go_edit.bind(this)}>修改</p>
                            </div>
                        </div>
                    </div>
                    <div className={info.bottom}>
                        <p>扣款方式</p>
                        <span>{this.state.details.companyName} ({this.state.details.productName})</span>
                    </div>
                </header>
                <div className={info.content}>
                    {this.state.orderList.map((item, idx) => {
                        return (
                            <div className={info.item} key={idx} onClick={this.goOrderInfo.bind(this,item.month)}>
                                <div>
                                    <span>{item.month}</span>
                                    <p>
                                        <i>￥</i>
                                        {item.orderAmount}
                                    </p>
                                </div>
                                <img src={right}></img>
                            </div>
                        )
                    })}
                    <div className={info.last} onClick={this.goInfoList.bind(this)}>
                        <p>查看全部交易记录</p>
                        <img src={right}></img>
                    </div>


                </div>
                <div className={info.bot}>
                    <p onClick={this.action.bind(this)}>解绑亲属</p>
                </div>
                {this.state.state ? (
                    <div className={info.showAction} onClick={this.closeAction.bind(this)}>
                        <div className={info.modu} onClick={(e)=>(this.setFocus(e))}>
                            <p className={info.title}>解绑副卡</p>
                            <p className={info.ts}>验证码已发送，请输入验证码，验证身份</p>
                            <input type="tel" maxLength="6" onChange={this.handleChange.bind(this)} ref={(input) => this.input = input} defaultValue={this.state.inpValu} />
                            <ul>
                                {this.state.msg.map((item, idx) => {
                                    return (
                                        <li key={idx}>
                                            {this.state.inpValu[idx]}
                                        </li>
                                    )
                                })}
                            </ul>
                        </div>
                    </div>
                ) : ''}
            </div>
        );
    }
    action() {
        this.setState({
            state: true
        }, () => {
            getCode({ phone: getUrlParam('phone') }).then(res => {
            })
            this.input.focus()
        })
    }
    setFocus(e) {
        this.input.focus()
        e.stopPropagation();
    }
    handleChange(e) {
        let that = this
        this.setState({
            inpValu: e.target.value
        })
        if (e.target.value.length === 6) {
            that.setState({
                state: false
            })
            unbindCard({
                id: getUrlParam('subCardId'),
                msgId: "",
                ownPhone: getUrlParam('phone'),
                code: this.input.value,
            }).then(res => {
                console.log(res.data)
                if (res.data.status === 200) {
                    this.props.history.push({ pathname: '/editQuota', state: { state: 1 } })
                } else {
                    alert(res.data.code)
                }
            })
        }
    }
    closeAction(){
        this.setState({
            state:false
        })
    }
    getInfo() {
        let subCardId = getUrlParam('subCardId')
        getSubCardDetail({ subCardId }).then(res => {
            if(res.data.status==200){
                if (res.data.result.orderList.length) {
                    res.data.result.orderList.map(item => {
                        item.orderAmount = divide(item.orderAmount, 100)
                    })
                }
                this.setState({
                    details: res.data.result,
                    orderList: res.data.result.orderList
                })
            }else{
                this.props.history.go(-1)
            }
            
        })

        
    }
    componentDidMount() {
        document.title = "副卡详情"
        this.getInfo()
    }
    go_edit() {
        console.log({ cardId: getUrlParam('subCardId'), phone: getUrlParam('phone') })
        this.props.history.push({ pathname: '/editSubCard', state: { cardId: getUrlParam('subCardId'), phone: getUrlParam('phone') } })
    }
    goInfoList() {
        this.props.history.push('/orderInfo?sid='+getUrlParam('subCardId'))
    }
    // 跳转订单详情
    goOrderInfo(mouth){
        this.props.history.push('/orderInfo?mouth='+mouth+'&sid='+getUrlParam('subCardId'))
    }
}

export default SubCardInfo;